{% extends 'base.html' %}

{% block title %}智能问答{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">智能问答系统</h1>
    
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">提问</h5>
                </div>
                <div class="card-body">
                    <form action="{{ url_for('student_ai_qa') }}" method="post">
                        <div class="mb-3">
                            <label for="question" class="form-label">您的问题</label>
                            <textarea class="form-control" id="question" name="question" rows="3" placeholder="请输入您的问题..." required></textarea>
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="submit" class="btn btn-primary">提交问题</button>
                        </div>
                    </form>
                </div>
            </div>
            
            {% if question %}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">问题</h5>
                </div>
                <div class="card-body">
                    <p>{{ question }}</p>
                </div>
            </div>
            
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">回答</h5>
                </div>
                <div class="card-body">
                    <div class="answer-content">
                        {{ answer|safe }}
                    </div>
                </div>
            </div>
            {% endif %}
            
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="card-title mb-0">热门问题</h5>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        <button type="button" class="list-group-item list-group-item-action" onclick="fillQuestion('如何提高数学成绩？')">如何提高数学成绩？</button>
                        <button type="button" class="list-group-item list-group-item-action" onclick="fillQuestion('物理公式记不住怎么办？')">物理公式记不住怎么办？</button>
                        <button type="button" class="list-group-item list-group-item-action" onclick="fillQuestion('如何高效复习英语单词？')">如何高效复习英语单词？</button>
                        <button type="button" class="list-group-item list-group-item-action" onclick="fillQuestion('如何规划学习时间？')">如何规划学习时间？</button>
                        <button type="button" class="list-group-item list-group-item-action" onclick="fillQuestion('做题时常见的错误有哪些？')">做题时常见的错误有哪些？</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function fillQuestion(question) {
    document.getElementById('question').value = question;
}
</script>
{% endblock %} 